<template>
  <div :class="type==1?'luckyBagRain':'luckyBagRain2'">
    <div>
      <div class="frame">
       <img class="frameRule" @click="isRule" src="../../../../static/rule.png" alt="" />
       <img class="frameRule frameCard" @click="myCard" src="../../../../static/jilu.png" alt="" />
       <img class="frameRule2 frameCard" @click="updatePhoneShow = true" src="../../../../static/bind.png" alt="" />
      </div>
      <div v-if="type==1">
        <div class="submit"></div>
      </div>
      <div v-else>
        <div class="title3">您的幸运数字</div>
        <div class="title4">8</div>
        <div class="title5">开奖日期</div>
        <div class="title6">2025年4月1日</div>
        <div class="submit2"></div>
      </div>

      <div class="title2">活动规则</div>
      <div class="ruleContent">
        <div>1、活动天天有,大奖等你抽为回馈广大市民对xxx的支持与厚爱,凡XXX日至XXX日期间累计消费满x元的市民,可向商户领取抽奖券1张,</div>
        <div>2、抽奖活动百分百中奖,抽奖券数量有限送完为止。奖项设置:奖项数量奖品一等奖1名价值30</div>
      </div>
      <activityRule :show="ruleShow" :title="mallActivityEntity.strategy" @isRule="isRule"></activityRule>
      <redChangePhone v-if="updatePhoneShow" @phoneCancel="phoneCancel" :titles="titles"></redChangePhone>
    </div>
    <div class="popups" v-if="isType==2">
      <div class="zjt"></div>
      <div class="zjSubmit">领取奖品</div>
    </div>
    <div class="popups" v-if="isType==3">
      <div class="zjt2"></div>
      <div class="zjSubmit">下次再来</div>
    </div>
  </div>
</template>

<script>
  // 请求接口
  import {
    activityInfo2,
    activityVerify,
    draw,
    placeOrder,
    postPrepay,
    getUserInfo
  } from '@/api/raffle.js'
  import redChangePhone from '@/components/redChangePhone'
  import activityRule from '@/components/activityRule'
  import {
    Dialog
  } from 'vant'
  import {
    setStore,
    getStore,
    removeStore
  } from '@/utils/storage'
  import {
    baseApi,
    wechatAuthUrlTail,
    preLoginUrl
  } from '@/config'
  import axios from 'axios'
  export default {
    components: {
      redChangePhone,
      activityRule
    },
    data() {
      return {
        type:1,
        isType:3,
        list: [],
        nubmer: 0,
        setInterva:null,
        ruleShow: false,
        activityCode: '', //活动信息唯一code
        updatePhoneShow: false, //手机号弹窗
        mallActivityEntity: {}, //活动信息
        activity: {}, //活动内容
        isSettimer: false,
        titles: '绑定手机号',
        goodsType: '',
        orderSn: '',
        time:3,
        timeInter:null,
        isPopup:false,
        lotteryBool:'',
        goodsName:''
      }
    },
    mounted() {
      this.activityCode = this.$route.query.activityCode
      setStore('activityCode',this.$route.query.activityCode)
      this.activityInfo2()

    },
    methods: {
      phoneCancel(){
        this.updatePhoneShow = false
        this.activityInfo2()
      },
      setIntervals() {
        this.setInterva = setInterval(() => {
          this.list.push({
            left: Math.floor(Math.random() * 330) + 1,
            isChenk: false,
            id: this.list.length,
            isHb:true
          })
        }, 500)
        setTimeout(()=>{
          clearInterval(this.setInterva)
        },15000)
        setTimeout(()=>{
          if (!this.lotteryBool) {
            this.dialog('非常遗憾未中奖')
          } else {
            this.dialog('恭喜您抽中了' + this.goodsName)
          }
        },18000)
      },
      clickHb(e) {
        this.list.forEach((item, index) => {
          if (e.id == item.id) {
            item.isHb = false
            setTimeout(()=>{
              item.isChenk = true
            },1000)

          }
        })
        this.nubmer++

      },
      clickEgg(){
        let that = this
        let data ={
          activityId:this.mallActivityEntity.id
        }
        placeOrder(data).then(res=>{
          console.log(res)
            that.orderSn = res.data.orderSn
            if(res.code==0){
              if(res.data.needToPay==1){
                let pay = {
                  orderId:res.data.orderSn,
                  tradeType:'JSAPI'
                }
                that.prepay(pay)
              }else{
                that.isPopup = true
                that.timeInter = setInterval(()=>{
                  that.time = that.time-1
                  if(this.time==0){
                    that.isPopup = false
                    clearInterval(that.timeInter)
                    that.start()

                  }
                },1000)
              }
            }else{
              that.showToast(res.msg)
            }
        }).catch(res=>{
          console.log(1)
          if(res.code==7){
            this.updatePhoneShow = true
          }else{
            that.showToast(res.msg)
          }
        })
      },
      //预支付(拿到微信支付参数)
      prepay(pay){
        let that = this
        postPrepay(pay).then(res=>{
          console.log(res)
          if (res.msg === 'success') {
            if (typeof WeixinJSBridge === 'undefined') {
              if (document.addEventListener) {
                document.addEventListener('WeixinJSBridgeReady', that.onBridgeReady, false)
              } else if (document.attachEvent) {
                document.attachEvent('WeixinJSBridgeReady', that.onBridgeReady)
                document.attachEvent('onWeixinJSBridgeReady', that.onBridgeReady)
              }
            } else {
              that.onBridgeReady(res.data)
            }
          }
        }).catch(fail=>{
          that.showToast(fail.msg)
        })
      },
      // 微信支付预支付OK时，发起真正微信支付请求
      onBridgeReady(data) {
        const that = this
        WeixinJSBridge.invoke('getBrandWCPayRequest', {
            appId: data.appId, // 公众号名称，由商户传入
            timeStamp: data.timeStamp, // 时间戳，自1970年以来的秒数
            nonceStr: data.nonceStr, // 随机串
            package: data.packageValue, // 微信订单id
            signType: 'MD5', // 微信签名方式：
            paySign: data.paySign // 微信签名
          },
          function(res) {
            if (res.err_msg === 'get_brand_wcpay_request:ok') {
              that.showToast('支付成功...')
              setTimeout(() => {
               that.start()
              }, 1000);
            } else {
              that.showToast('未完成支付...')
              return
            }
          })
      },
      // 抽奖
      start() {
        let data = {
          activityId: this.mallActivityEntity.id,
          number: this.nubmer,
          orderSn:this.orderSn
        }
        draw(data).then(res => {
          if (res.code == 0) {
            this.setIntervals()
            this.lotteryBool = res.data.lotteryBool?1:0
            this.goodsName = res.data.goodsName

          } else {
            this.dialog(res.msg)
          }
        }).catch(res => {
          if (res.code == 7) {
            this.updatePhoneShow = true
          }
          this.dialog(res.msg)
        })
      },
      // 活动规则
      isRule() {
        this.ruleShow = !this.ruleShow
      },
      // 活动卡卷1
      myCard() {
        this.$router.push({
          path: '/mycard?id='+this.mallActivityEntity.id
        })
      },
      //活动信息
      activityInfo2() {
        let data = {
          activityCode: this.activityCode
        }
        axios({
          method: 'get',
          url: baseApi + 'app/wheelLottery/activityInfo',
          params: {
             activityCode: this.activityCode
          }
        })
        .then(res => {
          let data = res.data.data
          console.log(data)
          setStore('appid',data.mallActivityEntity.appId)


          if(!getStore('token')){
            let wechatAuthUrlFront = 'https://open.weixin.qq.com/connect/oauth2/authorize?appid='+data.mallActivityEntity.appId+'&redirect_uri='
            var jumpUrl = wechatAuthUrlFront + encodeURIComponent(preLoginUrl) + wechatAuthUrlTail
            console.log(jumpUrl)
            setStore('loginRequestUrl',window.location.href)
            setTimeout(function() {
              location.href = jumpUrl
            }, 1500)
          }else{
            this.mallActivityEntity = data.mallActivityEntity
            this.activity = data
            document.title = data.mallActivityEntity.name
            this.clickEgg()

          }
        })
        .catch(res => {
        })
      },

      // 获取白名单资格
      activityVerify() {
        let data = {
          id: this.mallActivityEntity.id
        }
        activityVerify(data).then(res => {
          if (res.code == 0) {
            this.number = res.data.number
          } else {
            this.dialog(res.msg)
          }
        }).catch(res => {
          if (res.code == 7) {
            this.updatePhoneShow = true
          }
          this.dialog(res.msg)
        })
      },
      // 提示
      dialog(message, url) {
        Dialog.alert({
          message: message,
        }).then(() => {
          // on close
          if (url) {

          }
        });
      },
      showToast(msg) {
        this.$toast({
          message: msg,
          position: 'center',
          duration: 2500
        })
      },
    }
  }
</script>

<style lang="scss" scoped>
  .luckyBagRain {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: url('../../../../static/game/drawWinner/drawBj.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
  }
  .luckyBagRain2 {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background: url('../../../../static/game/drawWinner/drawBj2.png') no-repeat;
    background-size: 100% 100%;
    position: relative;
    overflow: hidden;
  }
  .submit{
    width: 170px;
    height: 46px;
    background: url('../../../../static/game/drawWinner/drawAn.png') no-repeat;
    background-size: 100% 100%;
    margin: 436px auto 0;
  }
  .submit2{
    width: 170px;
    height: 46px;
    background: url('../../../../static/game/drawWinner/dkj.png') no-repeat;
    background-size: 100% 100%;
    margin: 26px auto 0;
  }
  .title2{
    width: 103px;
    height: 28px;
    background: url('../../../../static/game/drawWinner/titles.png') no-repeat;
    background-size: 100%;
    font-weight: 500;
    font-size: 18px;
    color: #FEFAC1;
    text-align: center;
    line-height: 28px;
    margin: 24px auto 0;
  }
  .title3{
    margin: 195px auto 0;
    text-align: center;
    font-weight: bold;
    font-size: 26px;
    color: #FFF6E2;
  }
  .title4{
    width: 126px;
    height: 126px;
    background: url('../../../../static/game/drawWinner/ty.png') no-repeat;
    background-size: 100% 100%;
    margin: 12px auto 0;
    text-align: center;
    line-height: 126px;
    font-weight: bold;
    font-size: 84px;
    color: #FF3131;
  }
  .title5{
    font-weight: bold;
    font-size: 17px;
    color: #FBF1D9;
    margin: 13px auto 0;
    text-align: center;
  }
  .title6{
    font-weight: bold;
    font-size: 17px;
    color: #FBF1D9;
    margin: 4px auto 0;
    text-align: center;
  }
  .ruleContent{
    font-weight: 500;
    font-size: 12px;
    color: #FEFAC1;
    width: 305px;
    margin: 10px auto 0;
  }
  .frameCard {
    margin-top: 10px;
  }

  .frameRule {
    color: #fff;
    border-radius: 12px 0 0 12px;
    box-sizing: border-box;
    display: block;
  }
  .frameRule2{
    display: block;
    color: #fff;
    border-radius: 12px 0 0 12px;
    box-sizing: border-box;
  }

  .frame {
    position: absolute;
    top: 20px;
    right: 0;
  }
  .number {
    font-size: 28px;
    color: #fff;
    margin-left: 30px;
    margin-top: 30px;
  }
  .popup{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0,.4);
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
  }
  .popup img{
    width: 285px;
    height: 325px;
    display: block;
    margin: 187px auto 0;
  }
  .times{
    color: #fff;
    font-size: 16px;
    text-align: center;
    width: 100%;
  }
  .popups{
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, .6);
    position: fixed;
    top: 0;
    left: 0;
    overflow: hidden;
    .zjt{
      width: 366px;
      height: 327px;
      margin: 124px auto 0;
      background: url('../../../../static/game/drawWinner/zj.png') no-repeat;
      background-size: 100% 100%;
    }
    .zjt2{
      width: 279px;
      height: 229px;
      margin: 180px auto 0;
      background: url('../../../../static/game/drawWinner/yh.png') no-repeat;
      background-size: 100% 100%;
    }
    .zjSubmit{
      width: 244px;
      height: 50px;
      background: url('../../../../static/game/drawWinner/zjan.png') no-repeat;
      background-size: 100% 100%;
      text-align: center;
      line-height: 50px;
      font-weight: bold;
      font-size: 27px;
      color: #FFFFFF;
      margin: 20px auto 0;
    }
  }
</style>
